import React, { Component } from "react";
import { connect } from "react-redux";
import "./DepositDetail.scss";
import yhTools from "../../../tools/yh";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { channelCode, InterfaceG } from "../../../config/Config";
import { Toast } from "antd-mobile";

class DepositDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loadStatus: "0", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			selectIndex: -1,
			orderInfos: []
		};
	}

	componentDidMount() {
		this.getInitData();
	}

	getInitData = () => {
		let objs = {
			url: InterfaceG.financeBill,
			params: {
				channelCode: channelCode,
				// productId: this.props.getAppPlatformsDatas.lnid,
				pageIndex: "1",
				pageSize: "100"
			}
		};
		// Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				const data = res.data || {};
				this.setState({
					orderInfos: data.orderInfos,
					loadStatus: "1"
				});
			} else {
				Toast.info(res.message, 2);
				this.setState({
					loadStatus: "2"
				});
			}
		});
	};

	render() {
		const headerParams = {
			header: {
				title: "存单明细"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};

		let { orderInfos } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="deposit-detail-page">
					<div className="list">
						{orderInfos.map((item, i) => {
							return (
								<div className="item" key={i}>
									<div className="r-top">
										<div className="r-top-l">{item.buyDate}转入</div>
										<div className="r-top-r">
											{item.lock == "1" && (
												<div className="font-grey">观察期，不可支取</div>
											)}
											{item.lock == "0" && (
												<div
													className="go-to-btn"
													onClick={() =>
														this.gotoPage(
															2,
															item.tradeNumber,
															item.lock,
															item.productDetail
														)
													}
												>
													转出
												</div>
											)}
										</div>
									</div>
									<div
										className="r-bottom"
										onClick={() =>
											this.gotoPage(
												1,
												item.tradeNumber,
												item.lock,
												item.productDetail
											)
										}
									>
										<div className="r-bottom-l">
											<div className="r-bottom-1-top">持有金额</div>
											<div className="r-bottom-1-bottom">
												¥{item.unadvanceAmt}
											</div>
										</div>
										<div className="r-bottom-r">
											<div className="r-bottom-r-top">下一周期派息</div>
											<div className="r-bottom-r-bottom">
												¥{item.nextTermProfit}
											</div>
										</div>
									</div>
								</div>
							);
						})}
						<div className="look-more">没有更多记录了</div>
					</div>
				</div>
			</MainLayout>
		);
	}

	gotoPage = (key, tradeNumber, lock, productDetail) => {
		if (key === 1) {
			this.props.history.push({
				pathname: `/depositItemDetails/${tradeNumber}/${lock}/${productDetail}`
			});
		} else {
			this.props.history.push({
				pathname: `/transferXHBOut/${tradeNumber}`
			});
		}
	};

	// itemClick(i) {
	//     const {selectIndex, orderInfos} = this.state;
	//     if (selectIndex === i) {//点击同一个时，取消
	//         return
	//     }
	//     if (selectIndex != -1) {
	//         orderInfos[selectIndex].choose = '0';
	//     }
	//     orderInfos[i].choose = '1';
	//     this.setState({
	//         selectIndex: i,
	//         orderInfos: orderInfos
	//     });
	// }
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const DepositDetailPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(DepositDetail);
export default DepositDetailPage;
